<template>
  <!--两列布局-->
  <div class="wrapper qa-content">
      <!-- 标题 -->
    <div class="qa-title">
      <div class="fl title">
        <h1>{{article.title}}</h1>
        <p>
          <span class="tag">大牛</span>
          <!-- <span class="author">大牛</span> -->
          &nbsp;&nbsp;&nbsp;发布时间： <span>{{article.createtimeStr}}</span>
        </p>
      </div>
      <div class="fr share">
        <h4>分享到：</h4>
        <ul class="share-go">
          <li>
            <img src="~assets/img/widget-weibo.png" alt />
          </li>
          <li>
            <img src="~assets/img/widget-weixin.png" alt />
          </li>
          <li>
            <img src="~assets/img/widget-weibo.png" alt />
          </li>
          <li>
            <img src="~assets/img/widget-weixin.png" alt />
          </li>
        </ul>
      </div>
      <div class="clearfix"></div>
    </div>

    <!-- 内容 -->
    <div class="fl left-list">
        <!-- 内容 -->
      <div class="problem-detail">
        <div class="title-intro">
          <div class="sidebar">
            <button
              type="button"
              class="like"
              data-placement="right"
              data-toggle="tooltip"
              title="问题对人有帮助，内容完整，我也想知道答案"
            >
              <i class="fa fa-caret-up" aria-hidden="true"></i>
            </button>
            <span class="count">0</span>
            <button
              type="button"
              class="hate"
              data-placement="right"
              data-toggle="tooltip"
              title="问题没有实际价值，缺少关键内容，没有改进余地"
            >
              <i class="fa fa-caret-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="title">
              <!-- 内容 -->
            <div class="detail">
                <p v-html="article.content">
                    
                </p>


            </div>
            <div class="clearfix"></div>
            <div class="operate">
              <span class="time">1小时前提问</span>
              <span class="comment">评论</span>
              <span class="edit">编辑</span>
              <span class="jubao">举报</span>
            </div>
            <div class="comment-box">
              <form class="comment-form">
                <textarea row="1" placeholder="使用评论询问更多信息或提出修改意见，请不要在评论里回答问题"></textarea>
                <button type="submit" class="sui-btn submit-comment">提交评论</button>
              </form>
              <div class="tips">
                <p>评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`- 列表。 同时，被你 @ 的用户也会收到通知</p>
              </div>
            </div>
          </div>
        </div>
        <div class="answer-intro">
          <h4 class="answer-num">1个回答</h4>

          <div class="sidebar">
            <button
              type="button"
              class="like"
              data-placement="right"
              data-toggle="tooltip"
              title="问题对人有帮助，内容完整，我也想知道答案"
            >
              <i class="fa fa-caret-up" aria-hidden="true"></i>
            </button>
            <span class="count">0</span>
            <button
              type="button"
              class="hate"
              data-placement="right"
              data-toggle="tooltip"
              title="问题没有实际价值，缺少关键内容，没有改进余地"
            >
              <i class="fa fa-caret-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="title">
            <p>不需要分开传的 你看到的是由于你使用了 new FormData()</p>
            <div class="operate">
              <div class="tool pull-left">
                <span class="time">1小时前提问</span>
                <span class="comment">评论</span>
                <span class="edit">编辑</span>
                <span class="jubao">举报</span>
              </div>

              <div class="myanswer pull-right">
                <img src="~assets/img/widget-photo.jpg" alt />
                <a href="#">我的回答</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="comment-box">
              <form class="comment-form">
                <textarea row="1" placeholder="使用评论询问更多信息或提出修改意见，请不要在评论里回答问题"></textarea>
                <button type="submit" class="sui-btn submit-comment">提交评论</button>
              </form>
              <div class="tips">
                <p>评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`- 列表。 同时，被你 @ 的用户也会收到通知</p>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="edit-answer">
          <h4>撰写答案</h4>
          <div class="edit-tip">
            <h4>你正在撰写答案</h4>
            <p>如果你是要对问题或其他回答进行点评或询问，请使用“评论”功能。</p>
          </div>
        </div>
      </div>

    </div>
    <div class="fl right-tag">
      <div class="similar-problem">
        <h3 class="title">相似问题</h3>
        <ul class="problem-list">
          <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info">
              <a href>1 回答</a> | 已解决
            </p>
          </li>
          <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info">
              <a href>1 回答</a> | 已解决
            </p>
          </li>
          <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info">
              <a href>1 回答</a> | 已解决
            </p>
          </li>
          <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info">
              <a href>1 回答</a> | 已解决
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<script>
import '@/assets/css/page-sj-qa-detail.css'
import articleApi from '@/api/article'

export default {
    data(){
        return {

        }
    },
    asyncData({params}){
       console.log("文章路由参数："+params.id);
       return articleApi.findById(params.id).then(res=>{
            return {
                article:res.data.data
            }
        })


    }
};
</script>